<!DOCTYPE html>
    <html>
        <head>
            <title>JS和Native交互</title>
        </head>
        <body>
        	<h1>JS和Native交互</h1>
            <script type="text/javascript">
                function setupWebViewJavascriptBridge(callback) {
                    if (window.WebViewJavascriptBridge) {
                        return callback(WebViewJavascriptBridge);
                    }
                    if (window.WVJBCallbacks) {
                        return window.WVJBCallbacks.push(callback);
                    }
                    window.WVJBCallbacks = [callback];
                    var WVJBIframe = document.createElement('iframe');
                    WVJBIframe.style.display = 'none';
                    WVJBIframe.src = 'https://__bridge_loaded__';
                    document.documentElement.appendChild(WVJBIframe);
                    setTimeout(function() {
                        document.documentElement.removeChild(WVJBIframe)
                    }, 0)
                }
            
            setupWebViewJavascriptBridge(function(bridge) {
                var uniqueId = 1
                function log(message, data) {
                	var log = document.getElementById('log')
                	var el = document.createElement('div')
                	el.className = 'logLine'
                	el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
                	if (log.children.length) { 
                		log.insertBefore(el, log.children[0]) 
                	} else { 
                		log.appendChild(el) 
                	}
                }
                                
                bridge.registerHandler('JS Echo', function(data, responseCallback) {
                    log("Native调用JS,收到的参数:", data)
                    var callbackButton = document.getElementById('JsNative')
                    callbackButton.innerHTML = data
                    responseCallback("Native调用JS后,JS回传Native")
                })
                var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
                callbackButton.innerHTML = 'JS调用Native'
                callbackButton.id = 'JsNative'
                callbackButton.onclick = function(e) {
                    e.preventDefault()
                    log('JS调用Native: "ObjC Echo"', '')
                    bridge.callHandler('ObjC Echo', 'JS调用Native,JS传给Native', function(response) {
                        log('JS调用Native,收到的参数:', response)
                        callbackButton.innerHTML = response
                    })
                }
            })
                </script>
            <img src="https://www.baidu.com/img/bd_logo1.png" width="200" height="100">
            <div id='buttons'></div> <div id='log'></div>
        </body>
    </html>>
